<template>
	<view class="tab-page friend">
		<view class="nav-bar">
			<view class="nav-search">
				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
			</view>
			<view class="nav-add" @click="onAddNewFriends()">
				<uni-icons type="personadd" size="30"></uni-icons>
			</view>
		</view>
		<view class="friend-tip" v-if="friends.length==0">
			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
		</view>
		<view class="friend-items" v-else>
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<!-- 先展示在线好友-->
				<!-- <view v-for="(friend,index) in friends" :key="index">
					<friend-item v-if="!friend.delete&&friend.online" :friend="friend"></friend-item>
				</view> -->
				<!-- 再展示离线好友-->
				<!-- <view v-for="(friend,index) in friends" :key="index">
					<friend-item v-if="!friend.delete&&!friend.online" :friend="friend"></friend-item>
				</view> -->
				<!-- 异步加载demo -->
				<next-tree :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :ifSearch=true
					expandedMode="singe" uiMode="page" :checkStrictly="checkStrictly" :selectParent="selectParent"
					themeColor="#007aff" funcMode="dispaly" :treeData="friends" @cancel="oncancel" @confirm="onconfirm">
					<!-- label插槽示意代码 -->
					<template #label="{data: {id, label, iconSrc, prev, post,userFlag}}">
						<view class="line-block">
							<!-- <image class="img" v-if="userFlag == 0" :src="iconSrc"></image> -->
							<view class="avatar-text" :style="avatarTextStyle" v-if="userFlag == 1">
								{{label.substring(0,1).toUpperCase()}}
							</view>
							<text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp"
								v-if="post">&nbsp;{{post}}</text>
							<!-- <friend-item-tree :friend="data"></friend-item-tree> -->
							<!-- <head-image :name="label" :url="iconSrc" :size="90"></head-image>
							<view class="friend-info">
								<view class="friend-name">{{ label}}</view>
								<view class="friend-online"> -->
							<!-- <image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png"
										title="电脑设备在线" />
									<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png"
										title="移动设备在线" /> -->
							<!-- </view>
							</view> -->
						</view>
					</template>

				</next-tree>

			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				size: 60,
				textColor: "#ffffff",
				funcMode: 'display',
				selectParent: false,
				checkStrictly: false,
				activeId: '',
			}
		},
		methods: {
			onconfirm: function(list) {
				console.log('选中项的数量列表list：', list)
			},
			oncancel: function() {
				// 清除treeData的选中状态
				//this.checkedTreeData(this.treeData, [])
				uni.switchTab({
					url: "/pages/chat/chat"
				})
			},
			getTitle: function(checked) {
				return `已选：${checked.length}项`
			},
			changeVerify(current, chooseList) {
				// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
				// 如果函数体不做return返回值，即验证通过，控件正常处理业务
				console.log('当前变化的数据', current)
				console.log('已选择的数据', chooseList)
				// if (chooseList && chooseList.length > 4) {

				// 	return '最多可以选择4个节点'
				// }
				//跳转进入聊天页面
				console.log('当前变化的数据userFlag', current.userFlag)
				if ("1" == current.userFlag) {
					this.onSendMessage(current);
				}
			},
			/* showFriendInfo(friend) {
				uni.navigateTo({
					url: "/pages/common/user-info?id=" + friend.id
				})
			}, */
			onSendMessage(userInfo) {
				let chat = {
					type: 'PRIVATE',
					targetId: userInfo.id,
					showName: userInfo.label,
					headImage: userInfo.iconSrc,
				};
				this.$store.commit("openChat", chat);
				let chatIdx = this.$store.getters.findChatIdx(chat);
				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
				})
			},
			onFocusSearch() {
				uni.navigateTo({
					url: "/pages/friend/friend-search"
				})
			},
			onAddNewFriends() {
				uni.navigateTo({
					url: "/pages/friend/friend-add"
				})
			}
		},
		computed: {
			friends() {
				//return this.$store.state.friendStore.friends;
				let arr = this.$store.state.friendStore.friends;
				//对数据进行过滤处理
				let arrStr = JSON.stringify(arr);
				//依次修改对象中的每一个对象
				//let str = arrStr.replaceAll('nickName', 'label');
				//str = str.replaceAll('headImage', 'iconSrc');
				let str = arrStr.replace(new RegExp('nickName', 'g'), 'label');
				str = str.replace(new RegExp('headImage', 'g'), 'iconSrc');
				str = str.replace(/,"children":null/g, ''); //正则表达式去除
				console.log("friends:" + str)
				arr = JSON.parse(str);

				return arr;
			},
			avatarTextStyle() {
				return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size*0.4}rpx;`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.friend {
		position: relative;
		border: none;
		display: flex;
		flex-direction: column;

		.friend-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			text-align: center;
			line-height: 50rpx;
			text-align: left;
			color: darkblue;
			font-size: 30rpx;
		}

		.nav-bar {
			margin: 5rpx;
			display: flex;
			align-items: center;
			background-color: white;

			.nav-search {
				flex: 1;
			}

			.nav-add {
				line-height: 56px;
				cursor: pointer;
			}
		}

		.friend-items {
			flex: 1;
			padding: 0;
			border: none;
			overflow: hidden;
			position: relative;

			.scroll-bar {
				height: 100%;
			}
		}
	}
</style>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}

	.avatar-text {
		background-color: #007aff;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-right: 10px;
	}

	/* .content {
		margin-top: 60px;
	}

	.button-item {
		margin-top: 60px;
	} */
</style>